<template>
  <div>
    <div class="list1" @click="tobefore">返回</div>
    <div class="list2">
        <div class="list2-title">
            房号信息
        </div>
        <div class="list2-content">
            <el-form :model="ruleForm1" :rules="rules" ref="ruleForm1" :inline="true" label-width="100px" class="demo-ruleForm" style="display: flex;flex-wrap: wrap;justify-content: space-between">
                <el-form-item label="单元名称" prop="unitname" style="">
                    <el-input v-model="ruleForm1.unitname" style="width: 500px;"></el-input>
                </el-form-item>
                <el-form-item label="幢号" prop="buildnum" style="margin-right: 0;">
                    <el-input v-model="ruleForm1.buildnum" style="width: 500px;" ></el-input>
                </el-form-item>
                <el-form-item label="楼层好" prop="storeynum" style="">
                        <el-input v-model="ruleForm1.storeynum" style="width: 500px;"></el-input>
                    </el-form-item>
                    <el-form-item label="房号" prop="homenum" style="margin-right: 0;">
                        <el-input v-model="ruleForm1.homenum" style="width: 500px;"></el-input>
                    </el-form-item>
                    <el-form-item label="住客姓名" prop="homename" style="">
                        <el-input v-model="ruleForm1.homename" style="width: 500px;" @focus="switchwindow"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" prop="homestatus" style="margin-right: 0;">
                        <el-select v-model="ruleForm1.homestatus" placeholder="请选择" style="width: 500px;">
                            <el-option label="已入住" :value="1"></el-option>
                            <el-option label="未入住" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                
                <el-form :model="ruleForm4" :rules="rules" ref="ruleForm4"  label-width="100px" class="demo-ruleForm"  >
                    <div class="housemessage" style="position: relative;">
                        <el-tooltip class="item" effect="light" content="" 
                         placement="top">
                            <div slot="content">可填写房屋的详细信息介绍：<br/>1.房屋的基本信息<br/>2.房屋的成员信息<br/>3.房屋的设备信息<br/>4.房屋未来的规划填报</div>
                            <div style="position: absolute;left: 10px;top: 8px; background-color: #00BFFF; border-radius: 50%;width: 16px;height: 16px;line-height: 16px;text-align: center;color: white;font-size: 12px;">
                                ?
                            </div>
                        </el-tooltip>
                        <el-form-item label="房屋信息" prop="homemessage"  style="width: 100%;">
                            <el-input
                            type="textarea"
                            :rows="5"
                            placeholder="请填写房屋信息"
                            v-model="ruleForm4.homemessage">
                            </el-input>
                        </el-form-item>
                    </div>
                    
                    <div style="position: relative;">
                        <el-tooltip class="item" effect="light" content="" 
                         placement="top">
                            <div slot="content">可对家庭成员的信息实时录入：<br/>1.家庭的主要成员<br/>2.家庭的主要成员的信息填报<br/>3.家庭成员的健康信息状况<br/>4.家庭成员每日健康体温检测填写</div>
                            <div style="position: absolute;left: 10px;top: 8px; background-color: #00BFFF; border-radius: 50%;width: 16px;height: 16px;line-height: 16px;text-align: center;color: white;font-size: 12px;">
                                ?
                            </div>
                        </el-tooltip>
                        <el-form-item label="家庭成员" prop="homesuggestion"  style="width: 100%;">
                            <el-input
                            type="textarea"
                            :rows="5"
                            placeholder="请填写家庭成员"
                            v-model="ruleForm4.homesuggestion" maxlength="100" show-word-limit>
                            </el-input>
                        </el-form-item>
                    </div>
                </el-form>
        </div>
    </div>
    <div class="list3">
        <div class="list2-title">
            智能设备
        </div>
        <div class="list2-content">
            <el-form :model="ruleForm2" :rules="rules" ref="ruleForm2" :inline="true" label-width="100px" class="demo-ruleForm" style="display: flex;flex-wrap: wrap;justify-content: space-between">
                <el-form-item label="洗衣机数量" prop="washnum" style="">
                    <el-input v-model="ruleForm2.washnum" style="width: 500px;"></el-input>
                </el-form-item>
                <el-form-item label="WI-FI名称" prop="wifiname" style="margin-right: 0;">
                    <el-input v-model="ruleForm2.wifiname" style="width: 500px;" ></el-input>
                </el-form-item>
                <el-form-item label="空调数量" prop="airnum" style="">
                        <el-input v-model="ruleForm2.airnum" style="width: 500px;"></el-input>
                    </el-form-item>
                    <el-form-item label="智能设备状态" prop="smartstatus" style="margin-right: 0;">
                        <el-select v-model="ruleForm2.smartstatus" placeholder="请选择" style="width: 500px;">
                            <el-option label="完好" :value="1"></el-option>
                            <el-option label="待维修" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
        </div>
    </div>
    <div class="list4">
        <div class="list2-title">
            家居设备
        </div>
        <div class="list2-content">
            <el-form :model="ruleForm3" :rules="rules" ref="ruleForm3" :inline="true" label-width="100px" class="demo-ruleForm" style="display: flex;flex-wrap: wrap;justify-content: space-between">
                <el-form-item label="书桌数量" prop="homedesk" >
                    <el-input v-model="ruleForm3.homedesk" style="width: 500px;"></el-input>
                </el-form-item>
                <el-form-item label="椅子数量" prop="homechair" style="margin-right: 0;" >
                    <el-input v-model="ruleForm3.homechair" style="width: 500px;" ></el-input>
                </el-form-item>
                <el-form-item label="衣橱数量" prop="homeclothes" >
                        <el-input v-model="ruleForm3.homeclothes" style="width: 500px;"></el-input>
                    </el-form-item>
                    <el-form-item label="家居设备状态" prop="familystatus"  style="margin-right: 0;">
                        <el-select v-model="ruleForm3.familystatus" placeholder="请选择" style="width: 500px;">
                            <el-option label="完好" :value="1"></el-option>
                            <el-option label="待维修" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
        </div>
    </div>
    <div class="list5" style="text-align: right;margin-right: 50px;">
        <el-button type="success" @click="tostore">保存</el-button>
        <el-button type="primary" @click="tobefore">返回</el-button>
        
    </div>
    <div class="list6">
        <el-dialog title="住客姓名" :visible.sync="dialogTableVisible" width="60%">
            <div style="margin-bottom: 10px">
                <el-radio v-model="radio" label="1">自定义</el-radio>
                <el-radio v-model="radio" label="2">复制</el-radio>
            </div>
            <div v-show="radio == 1 " >
                <el-input v-model="windowinput" placeholder="请输入住客姓名"></el-input>
                <div style="text-align: right;margin-top: 10px;">
                    <el-button type="primary" @click="closewindow">取消</el-button>
                    <el-button type="primary" @click="getwindowinput">确定</el-button>
                </div>
            </div>
            <div v-show="radio == 2">
                <div>
                    <el-input v-model="smallsearch" style="width: 300px;margin-right: 15px"></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="windowsearch">搜索</el-button>
                </div>
                <div>
                    <el-table
                        :data="smallData"
                        stripe
                        style="width: 100%">
                        <el-table-column
                        prop="id"
                        label="ID"
                        width="80">
                        </el-table-column>
                        <el-table-column
                        prop="username"
                        label="用户账号"
                        width="180">
                        </el-table-column>
                        <el-table-column
                        prop="homeaddress"
                        label="家庭住址">
                        </el-table-column>
                        <el-table-column
                        prop="type"
                        label="类型"
                        width="140">
                        <template slot-scope="scope">
                            {{ scope.row.type==1?"管理员":"普通用户" }}
                        </template>
                        </el-table-column>
                        <el-table-column
                        prop="address"
                        label="操作"
                        width="140">
                        <template slot-scope="scope">
                            
                            <i class="el-icon-circle-plus" style="color: #42B983;font-size: 20px; " @click="windowwarn(scope.row.username,scope.row)"></i>
                        </template>
                        </el-table-column>
                    </el-table>
                    
                </div>
                <div style="text-align: right;">
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[7, 10, 20, 30]"
                    :page-size="7"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                    </el-pagination>
                </div>
                <div>
                    <h2 style="color: black">已选结果</h2>
                    <el-table
                        :data="bottomData"
                        stripe
                        style="width: 100%">
                        <el-table-column
                        prop="id"
                        label="ID"
                        width="80">
                        </el-table-column>
                        <el-table-column
                        prop="username"
                        label="用户账号"
                        width="180">
                        </el-table-column>
                        <el-table-column
                        prop="homeaddress"
                        label="家庭住址">
                        </el-table-column>
                        <el-table-column
                        prop="type"
                        label="类型"
                        width="140">
                        <template slot-scope="scope">
                            {{ scope.row.type==1?"管理员":"普通用户" }}
                        </template>
                        </el-table-column>
                        <el-table-column
                        prop="address"
                        label="操作"
                        width="140">
                        <template>
                            <i class="el-icon-remove" style="color: red;font-size: 20px; " @click="deletebottomdata" ></i>
                        </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div style="text-align: right;margin-top: 10px">
                    <el-button type="primary" @click="closewindow">取消</el-button>
                    <el-button type="primary" @click="selectwindow" >选择</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            //小窗口载荷
            smallpage:{
                username: "",
                currPage: 0,
                pageNum: 7,
            },
            //小窗口数据
            totaol:"",
            smallData:[],
            bottomData:[],
            windowinput:"",
            //弹框
            dialogTableVisible: false,
            smallsearch:"",
            radio:"1",
            ruleForm1: {
                
                unitname: "",
                buildnum: "",
                storeynum: "",
                homenum: "",
                homename: "",
                homestatus: "",
                
                },
            ruleForm2:{
                airnum: "",
                wifiname: "",
                washnum: "",
                smartstatus: "",
            },
            ruleForm3:{
                homedesk: "",
                homechair: "",
                homeclothes: "",
                familystatus: "",
            },
            ruleForm4:{
                homemessage: "",
                homesuggestion: "",
            },
            rules: {
                unitname: [
                    { required: true, message: '请输入单元名称', trigger: 'blur' },
                ],
                buildnum: [
                    { required: true, message: '请输入幢号', trigger: 'blur' },
                ],
                storeynum: [
                    { required: true, message: '请输入楼层号', trigger: 'blur' },
                ],
                homenum: [
                    { required: true, message: '请输入房号', trigger: 'blur' },
                ],
                homename: [
                    { required: true, message: '请输入住客姓名', trigger: 'blur' },
                ],
                homestatus: [
                    { required: true, message: '请输入状态', trigger: 'blur' },
                ],
                homemessage: [
                    { required: true, message: '请输入房客信息', trigger: 'blur' },
                ],
                homesuggestion: [
                    { required: true, message: '请输入家庭成员', trigger: 'blur' },
                ],
                airnum: [
                    { required: true, message: '请输入空调数量', trigger: 'blur' },
                ],
                wifiname: [
                    { required: true, message: '请输入WI-FI名称', trigger: 'blur' },
                ],
                washnum: [
                    { required: true, message: '请输入洗衣机数量', trigger: 'blur' },
                ],
                smartstatus: [
                    { required: true, message: '请输入智能设备状态', trigger: 'blur' },
                ],
                homedesk: [
                    { required: true, message: '请输入书桌数量', trigger: 'blur' },
                ],
                homechair: [
                    { required: true, message: '请输入椅子数量', trigger: 'blur' },
                ],
                homeclothes: [
                    { required: true, message: '请输入衣橱数量', trigger: 'blur' },
                ],
                familystatus: [
                    { required: true, message: '请输入家园设备状态', trigger: 'blur' },
                ],
                
                },
            //保存载荷
            storepage:{
                id: this.$route.query.editId,
                unitname: "",
                buildnum: "",
                storeynum: "",
                homenum: "",
                homename: "",
                homestatus: "",
                airnum: "",
                wifiname: "",
                washnum: "",
                smartstatus: "",
                homedesk: "",
                homechair: "",
                homeclothes: "",
                familystatus: "",
                homemessage: "",
                homesuggestion: "",
                h_id: this.$route.query.editId,
                token:sessionStorage.getItem("token"),
            },
        }
    },
    created(){
        this.pagemessage()
    },
    methods:{
        //页面初始化
        pagemessage(){
            this.$axios.get("http://community.byesame.com/house/getDetailId",{params:{
                id:this.$route.query.editId,
                token:sessionStorage.getItem("token")
            }}).then((res)=>{
                console.log(res.data)
                this.storepage = res.data[0]
                this.storepage.id=this.$route.query.editId,
                this.storepage.h_id=this.$route.query.editId,
                this.storepage.token=sessionStorage.getItem("token"),
                this.ruleForm1 = this.storepage
                this.ruleForm2 = this.storepage
                this.ruleForm3 = this.storepage
                this.ruleForm4 = this.storepage
            })
        },
        //弹框开关
        switchwindow(){
            this.dialogTableVisible = true;
            this.getsmallmessage()
        },
        closewindow(){
            this.dialogTableVisible = false;
            
        },
        //小窗口搜索
        windowsearch(){
            this.smallpage.username = this.smallsearch
            this.getsmallmessage()
        },
        //小窗口警告信息
        windowwarn(value,row){
            console.log(row)
            console.log("tabale",this.bottomData)
            if(row.homeaddress == null){
                this.bottomData.pop(),
                this.bottomData.push(JSON.parse(JSON.stringify(row)))
                console.log(this.bottomData,"下方图标")
            }else{
                this.$notify({
                    title: '警告',
                    message: `目前 【${value}】 已录入房屋信息，请勿重复操作`,
                    type: 'warning'
                });
            }
            
        },
        //小窗口输入框数据传输
        getwindowinput(){
            this.ruleForm1.homename = this.windowinput
            this.dialogTableVisible = false;
        },
        //拿到小窗口数据
        getsmallmessage(){
            this.$axios.get("http://community.byesame.com/users/getUserList",{params:this.smallpage}).then((res)=>{
                console.log("小窗信息",res.data)
                this.smallData = res.data.data
                this.total = res.data.total
            })
        },
        //切页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.smallpage.pageNum = val
            this.getsmallmessage()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.smallpage.currPage = val -1
            this.getsmallmessage()
        },
        //保存
        tostore(){
            let promises = [];
            promises.push(this.$refs.ruleForm1.validate());
            promises.push(this.$refs.ruleForm2.validate());
            promises.push(this.$refs.ruleForm3.validate());
            promises.push(this.$refs.ruleForm4.validate());
        
            Promise.all(promises)
            .then(() => {
                this.$confirm('确定保存该房号消息?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        this.storemessage()
                    
                    
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            })
            .catch(() => {
                console.log('至少有一个表单验证失败');
            });
        },
        //保存接口
        storemessage(){
            this.$axios.post("http://community.byesame.com/house/updatenumList",this.storepage).then((res)=>{
                console.log("保存成功")
                this.$router.push("/house/number")
                this.$message({
                        type: 'success',
                        message: '房号信息更新成功!'
                    });
            })
        },
        //返回
        tobefore(){
            this.$router.push("/house/number")
        },
        //小窗口选择
        selectwindow(){
            this.ruleForm1.homename = this.bottomData[0].username
            this.dialogTableVisible = false
        },
        //小窗口选择删除
        deletebottomdata(){
            this.bottomData = []
        }
    }
}
</script>

<style scoped>
.list1{
    color:#20A0FF ;
}
.list2{
    margin-top: 10px;
}
.list2-title{
    font-weight: bold;
    font-size: 22px;
    border-left: 5px solid #20A0FF;
    padding-left: 10px;
}
.list2-content{
    margin-top: 20px;
    padding-left: 80px;
    width: 100%;
    box-sizing: border-box;
    padding-right: 50px;
}
>>>.el-form--inline .el-form-item__label{
    white-space: nowrap;
}
::v-deep .el-table th{
    background-color: #EEF1F6;
}
::v-deep.el-table thead {
  font-weight: bold;
  font-size: 16px;
  color: black;
}
::v-deep .el-table tr{
    color: black;
    font-size: 14px;
}
</style>